<!--
 * @Author: 89-83-77
 * @Description: 请填写当前文件简介
 * @Date: 2025-03-27 22:36:16
 * @LastEditTime: 2025-03-29 19:04:02
 * @FilePath: \fz-yzt-webd:\work\client\src\views\layouts\MainLayout.vue
-->
<template>
    <div class="main-layout">
        <el-container class="main-layout-container">
            <!-- 侧边栏菜单 -->
            <el-aside :width="isCollapse ? '64px' : '260px'" class="aside-container">
                <div class="logo-container">
                    <h1>{{ isCollapse ? 'Admin' : systemName }}</h1>
                </div>
                <!-- 导航菜单 -->
                <el-menu :default-active="$route.path" :collapse="isCollapse" router unique-opened>
                    <!-- 遍历带子菜单的路由 -->
                    <template v-for="item in menuRoutes" :key="item.path">
                        <sidebarItem :item="item" />
                    </template>
                </el-menu>
            </el-aside>
            <!-- 主内容区 -->
            <el-container class="main-container">
                <!-- 头部 -->
                <el-header class="header-container">
                    <div class="header-left">
                        <el-button @click="toggleCollapse" :icon="isCollapse ? 'Expand' : 'Fold'" circle />
                        <!-- 全屏按钮 -->
                        <el-tooltip :content="isFullscreen ? '退出全屏' : '全屏显示'" placement="bottom">
                            <el-button @click="toggleFullscreen" :icon="isFullscreen ? 'FullScreen' : 'Aim'" circle />
                        </el-tooltip>

                        <!-- 驾驶舱按钮 -->
                        <el-tooltip content="跳转驾驶舱" placement="bottom">
                            <el-button @click="goToDashboard" icon="DataLine" circle />
                        </el-tooltip>
                    </div>
                    <div class="header-right">
                        <el-dropdown>
                            <span class="user-info">
                                <el-avatar :size="30" style="margin-right:10px" />
                                Admin
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>个人中心</el-dropdown-item>
                                    <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </el-header>
                <!-- 面包屑区域 -->
                <div class="breadcrumb-container">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index" :to="item.path">
                            {{ item.meta.title }}
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <!-- 内容区 -->
                <el-main class="content-container">
                    <!-- 添加滚动容器 -->
                    <div class="scroll-container">
                        <router-view />
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import { ref, watch, computed, onMounted, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import sidebarItem from './sidebarItem.vue'
import { useUserStore } from '@/stores/user.js'
import { useRoleStore } from '@/stores/role.js'
import {
    PieChart, Monitor, User, Expand, Fold, FullScreen, Aim, DataLine
} from '@element-plus/icons-vue'


const router = useRouter()// 获取路由实例
const route = useRoute()// 获取路由对象
const isCollapse = ref(false)// 是否折叠
const isFullscreen = ref(false)// 是否全屏
const breadcrumbList = ref([])// 面包屑数据
const systemName = ref(import.meta.env.VITE_BASE_TITLE || '事件分析管理系统') // 系统名称
// 监听路由变化，关闭侧边栏
const toggleCollapse = () => {
    isCollapse.value = !isCollapse.value
}
// 退出登录，清除token，跳转到登录页
const handleLogout = () => {
    localStorage.removeItem('token')
    router.push('/login')
}
// 生成面包屑导航
const getBreadcrumb = () => {
    const matched = route.matched.filter(item => item.meta && item.meta.title)
    breadcrumbList.value = matched.map(item => ({
        path: item.path,
        meta: item.meta
    }))
}
// 全屏功能
const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen()
            .then(() => isFullscreen.value = true)
            .catch(err => console.error('全屏错误:', err))
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen()
            isFullscreen.value = false
        }
    }
}

// 监听全屏状态变化
const handleFullscreenChange = () => {
    isFullscreen.value = !!document.fullscreenElement
}

// 跳转驾驶舱
const goToDashboard = () => {
    router.push('/dashboard')
}
// 当前激活菜单
const activeMenu = computed(() => {
    const { meta, path } = route
    return meta.activeMenu || path
})

// 获取菜单路由（通过Pinia获取过滤后的路由）
const menuRoutes = computed(() => {
    const userStore = useUserStore()
    const roleStore = useRoleStore()
    // 获取当前用户权限
    const currentRole = roleStore.roles.find(r => r.name === userStore.role)
    return router.options.routes
        .find(r => r.path == '/').children
        .filter(() => {
            // 过滤掉没有权限的路由
            return currentRole?.permissions
        })
})
// 监听路由变化
watch(() => route.path, () => {
    getBreadcrumb()
}, { immediate: true })
// 生命周期钩子
onMounted(() => {
    document.addEventListener('fullscreenchange', handleFullscreenChange)
})
onUnmounted(() => {
    document.removeEventListener('fullscreenchange', handleFullscreenChange)
})
</script>

<style lang="less" scoped>
// 主布局结构
.main-layout {
    height: 100vh;

    // 容器布局
    &-container {
        height: 100%;
        display: flex;
    }

    // 侧边栏区域
    .aside-container {
        @aside-bg: #0053A7; // 导航栏底色
        @logo-bg: darken(#0053A7, 5%); // Logo背景色稍深
        @text-color: #fff; // 字体和图标颜色
        @active-bg: rgba(255, 255, 255, 0.6); // 被选中菜单底色
        @active-text-color: #2684e2; // 被选中菜单文字和图标颜色
        @hover-bg: rgba(255, 255, 255, 0.2); // 悬停背景色
        @menu-item-padding: 16px; // 增加菜单项内边距

        background: @aside-bg;
        transition: width 0.3s ease;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1); // 添加阴影效果

        // 侧边栏Logo区域
        .logo-container {
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: @text-color;
            background: @logo-bg;
            transition: all 0.3s;
            font-size: 18px;
            font-weight: 600;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);

            h1 {
                margin: 0;
                transition: all 0.3s;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        // 菜单通用样式
        .el-menu {
            border-right: none;
            background: @aside-bg;
            transition: width 0.3s ease;
            padding: 8px 0; // 添加内边距

            // 菜单项状态
            :deep(.el-menu-item),
            :deep(.el-sub-menu__title) {
                color: @text-color;
                height: 48px;
                line-height: 48px;
                font-size: 15px; // 增大字体
                font-weight: 500; // 加粗字体
                margin: 2px 0; // 调整间距

                transition: all 0.3s ease;
                padding: 0 @menu-item-padding !important;

                &:hover {
                    background: @hover-bg !important;
                }

                &.is-active {
                    background: @active-bg !important;
                    color: @active-text-color !important;
                    border-left: 3px solid #fff;

                    [class^="el-icon"] {
                        color: @active-text-color !important;
                    }
                }
            }

            :deep(.el-menu--inline) {
                color: @text-color;
                background: @logo-bg;
            }


            // 子菜单缩进
            .el-menu-item {
                padding-left: 52px !important;
            }

            // 菜单图标样式
            [class^="el-icon"],
            :deep(.el-sub-menu__title) [class^="el-icon"] {
                margin-right: 12px;
                width: 24px;
                text-align: center;
                font-size: 18px;
                color: @text-color;
                transition: all 0.3s ease;
            }

            // 子菜单箭头样式
            :deep(.el-sub-menu__title .el-sub-menu__icon-arrow) {
                font-size: 14px;
                margin-top: -2px;
                color: @text-color;
            }

            // 激活状态的子菜单箭头
            :deep(.is-active .el-sub-menu__title .el-sub-menu__icon-arrow) {
                color: @active-text-color !important;
            }
        }
    }

    // 主内容区域
    .main-container {
        flex: 1;
        min-width: 800px;
        display: flex;
        flex-direction: column;

        // 头部区域
        .header-container {
            @header-height: 60px;
            height: @header-height !important;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #fff;
            box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
            flex-shrink: 0;

            .header-left {
                display: flex;
                align-items: center;
                gap: 10px; // 按钮间距
            }

            // 用户信息样式
            .user-info {
                display: flex;
                align-items: center;
                cursor: pointer;

                .el-avatar {
                    margin-right: 10px;
                }
            }
        }

        // 面包屑导航
        .breadcrumb-container {
            @breadcrumb-height: 40px;

            height: @breadcrumb-height;
            line-height: @breadcrumb-height;
            padding: 0 20px;
            background: #fff;
            border-bottom: 1px solid #f0f0f0;
            box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

            .el-breadcrumb {
                line-height: @breadcrumb-height;
            }
        }

        // 内容显示区域
        .content-container {
            flex: 1;
            padding: 0 !important;
            overflow: hidden;

            .scroll-container {
                height: 100%;
                padding: 20px;
                box-sizing: border-box;
                overflow-y: auto;
            }
        }
    }
}

// 响应式处理
@media (max-width: 992px) {
    .main-container {
        min-width: auto !important;
    }
}
</style>